<template name="carGood">
	<view class="shopRow">
		<view class="titleBox">
			<view class="selectArea">
				<block v-if="isManage">
					<text class="iconfont shopSelect" :class="[goodInfo.isSelect?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"  @tap="selcetShop"></text>
				</block>
				<block v-else>
					<text v-if="isRunning==1" class="iconfont shopSelect" :class="[goodInfo.isSelect?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"  @tap="selcetShop"></text>
				</block>
				
			</view>
			
			<text class="iconfont icon-shoucangdianjia"></text>
			<text class="shopName" @tap="toPage" data-url="shopDetail" :data-id="goodInfo.storeId">{{goodInfo.storeName}}</text>
			<text class="iconfont icon-right" @tap="toPage" data-url="shopDetail" :data-id="goodInfo.storeId"></text>
		</view>
		<view class="goodRow" >
			<view class="goodInfo">
				<text class="iconfont selectGoog icon-yuanxingweixuanzhong" ></text>
				<view class="infoBox"  @tap="toPage" data-url="goodDetail" :data-id="goodInfo.courseId">
					<view class="goodBox">
						<image :src="goodInfo.img"></image>
						<text v-if="isRunning!=1">已失效</text>
					</view>
					
					<view class="textBox">
						<text class="title">{{goodInfo.courseName.substr(0,24)}}</text>
						<text class="price">￥{{goodInfo.price.toFixed(2)}}</text>
					</view>
				</view>
			</view>
			<view class="numAndPrice">
				<text class="iconfont icon-yuanxingweixuanzhong" ></text>
				<view class="priceBox">
					<text>预约金小计：￥{{(goodInfo.prepay*goodInfo.num).toFixed(2)}}</text>
					<text>满意再付：￥{{((goodInfo.price-goodInfo.prepay)*goodInfo.num).toFixed(2)}}</text>
				</view>
				<!-- <view class="jishuBox">
					<button @tap="reduce" :disabled="goodInfo.num<=1">-</button>
					<input type="number" class="goodNum" v-model="goodNum" @blur="inputBlur" />
					<button @tap="add">+</button>
				</view> -->
			</view>
		</view>
	</view>
	
</template>

<script>
	// vuex 导入
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'carGood',
		// 传递参数
		props: {
			goodInfo:{
				type:Object,
				default:null
			},
			index:{
				type:Number,
				default:0
			},
			isManage:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			...mapState({
				carList: stata => stata.car.carList,
			}),
		},
		// 自身参数
		data() {
			return {
				isSelect:false,
				isRunning:1
			}
		},
		watch:{
			goodInfo(newVal){
				this.getStatus()
			}
		},
		// 方法
		methods: {
			// reduce(){
			// 	if(this.goodNum>1){
					
			// 		this.$store.dispatch("apiUpdateNum",{
			// 			id:this.goodInfo.id,
			// 			num:(parseInt(this.goodNum)-1)
			// 		}).then(res=>{
			// 			this.goodNum=parseInt(this.goodNum)-1
			// 		})
			// 	}else{
					
			// 	}
				
			// },
			// add(){
				
			// 	this.$store.dispatch("apiUpdateNum",{
			// 		id:this.goodInfo.id,
			// 		num:(parseInt(this.goodNum)+1)
			// 	}).then(res=>{
			// 		this.goodNum=parseInt(this.goodNum)+1
			// 	})
			// },
			// inputBlur(){
			// 	this.$store.dispatch("apiUpdateNum",{
			// 		id:this.goodInfo.id,
			// 		num:(this.goodNum)
			// 	}).then(res=>{
			// 		this.goodNum=parseInt(this.goodNum)
			// 	})
			// },
			selcetShop(){
				/* 
				原多选
				this.isSelect=!this.isSelect
				uni.$emit("selectGood",{index:this.index}) */
				// this.isSelect=true;
				uni.$emit("selectGood",{index:this.index})
				
			},
			getStatus(){
				this.$store.dispatch("apiGetGoodDetailById",{
					id:this.goodInfo.courseId,
					userId:0
				}).then(res=>{
					if(res.data.data.isDelete){
						uni.$emit("runningGood",{
							index:this.index,
							running:2
						})
						this.isRunning=res.data.data.running;
					}else{
						uni.$emit("runningGood",{
							index:this.index,
							running:res.data.data.running
						})
						this.isRunning=res.data.data.running;
					}
					
				}).catch(res=>{
					uni.$emit("runningGood",{
						index:this.index,
						running:2		//已删除
					})
					this.isRunning=2;
				})
			}
		},
		// created声明周期
		created() {
			this.goodNum=parseInt(this.goodInfo.num);
			setTimeout(()=>{
				this.getStatus();
			},500)
			/*原多选 uni.$on("selectAll",(payload)=>{
				this.isSelect=payload.selectAll
			}) */
		},

	}
</script>

<style lang="less" scoped>
	// @import "../../common/public.less";
	.shopRow {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 20upx;
		margin-bottom: 24upx;
	
		.titleBox {
			padding: 24upx 40upx;
			display: flex;
			align-items: center;
			.selectArea{
				width: 84upx;
			}
			.icon-shoucangdianjia {
				color: #202932;
				font-size: 40upx;
				margin-right: 10upx;
			}
	
	
			.shopSelect {
				font-size: 44upx;
				// margin-right: 40upx;
				color: #c3c3c3;
			}
	
			.icon-yuanxingxuanzhongfill {
				color: #ffcd11;
			}
	
			.shopName {
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
				flex: 1;
			}
	
			.icon-right {
				color: #9a9a9a;
				font-size: 32upx;
			}
		}
	}
	.goodRow {
		display: flex;
		flex-direction: column;
		padding: 28upx 18upx 28upx 40upx;

		.goodInfo {
			display: flex;
			align-items: center;

			.selectGoog {
				font-size: 44upx;
				margin-right: 40upx;
				color: rgba(0,0,0,0);
				
			}
			.goodBox{
				width: 160upx;
				height: 160upx;
				margin-right: 18upx;
				flex-shrink: 0;
				border-radius: 10upx;
				overflow: hidden;
				position: relative;
				text{
					position: absolute;
					width: 100%;
					font-size: 24upx;
					z-index: 9;
					left: 0;
					bottom: 0;
					text-align: center;
					background-color: rgba(0,0,0,0.5);
					color: #FFFFFF;
					padding: 6upx 0;
				}
			}
			image {
				width: 160upx;
				height: 160upx;
				flex-shrink: 0;
			}

			.infoBox {
				flex: 1;
				display: flex;
				
				.textBox {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 30rpx;
						color: #202932;
						margin-bottom: 30upx;
					}

					.price {
						font-size: 36rpx;
						font-weight: bold;
						color: #ff3b2b;
					}
				}
			}
		}

		.numAndPrice {
			display: flex;
			align-items: flex-end;
			margin-top: 40upx;

			.iconfont {
				font-size: 44upx;
				margin-right: 40upx;
				color: rgba(0, 0, 0, 0);
			}

			.priceBox {
				display: flex;
				flex-direction: column;
				flex-shrink: 0;
				flex-grow: 1;
				text {
					font-size: 26rpx;
					color: #202932;
				}

				text:last-child {
					font-size: 26rpx;
					color: #939393;
					margin-top: 20upx;
				}
			}
			.jishuBox{
				display: flex;
				height: 54upx;
				border: 1px solid #e5e5e5;
				border-radius: 10upx;
				overflow: hidden;
				button{
					border: none;
					line-height: 50upx;
					height: 50upx;
					padding: 0;
					text-align: center;
					width: 52upx;
					font-size: 32upx;
					border-radius: 0;
					background-color: rgba(0,0,0,0);
					color: #b9b9b9;
				}
				button:after{
					border: none;
					outline: none;
					border-radius: 0;
				}
				button:first-of-type{
					border-right: 1px solid #e5e5e5;
				}
				button:last-of-type{
					border-left: 1px solid #e5e5e5;
					
				}
				.goodNum{
					width: 80upx;
					background-color: rgba(0,0,0,0);
					color: #737373;
					text-align: center;
					font-size: 24upx;
					line-height: 50upx;
					height: 50upx;
				}
			}
		}
	}
</style>
